<template>
  <div class="comment-info" v-if="Object.keys(commentInfo).length !== 0" >
    <div class="info-header">
      <span>用户评价</span>
      <span class="more">
        更多
      </span>
    </div>
    <div>
      <div class="info-user">
        <img :src="commentInfo.user.avatar" alt="" /> 
     <span>{{ commentInfo.user.uname }}</span>

     <img :src="commentInfo.user.avatar" alt="">
        <span>{{commentInfo.user.uname}}</span>

      </div>
      <p class="info-content">{{ commentInfo.content }}</p>
      <p class="info-content">{{ commentInfo.style }}</p>
      <div class="info-imgs">
        <img
          :src="item"
          alt=""
          v-for="(item, index) in commentInfo.images"
          :key="index"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "../../../common/utils";
export default {
  name: "DetailCommentInfo",
  props: {
    commentInfo: {
      style: Object,
      default() {
        return {};
      },
    },
  },
  mounted(){
  },
  filters: {
    showDate: function (value) {
      let date = new Date(value * 1000);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
};
</script>
<style scoped>
.comment-info {
  border-top: 5px solid #f2f5f8;
  padding: 0 10px;
}
.info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 40px;
  border-bottom: 1px solid #0000001a;
  font-size: 14px;
}
.info-header div {
  flex: 1;
}
.info-header img {
  width: 14px;
}
.more {
  font-size: 10;
}
.info-user {
  padding: 10px 0 5px;
}

.info-user img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.info-content {
  line-height: 20px;
  font-size: 14px;
}
.info-user span {
  position: relative;
  font-size: 12px;
  top: -15px;
  margin-left: 10px;
}
.info-imgs {
  margin-top: 10px;
}

.info-imgs img {
  width: 70px;
  height: 70px;
  margin-right: 5px;
}
</style>